* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #000;
  overflow: hidden;

}
section::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: linear-gradient(#ffc107, #e91e63);
  border-radius: 50%;
  transform: translate(-400px,-120px);
}
section::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: linear-gradient(#2196f3, #31ff38);
  border-radius: 50%;
  transform: translate(300px,140px);
}
.box{
    position: relative;
    z-index: 11;
}
.box .container{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    width: 700px;
    height: 400px;
    background-color: rgba(255, 255, 255, .1);
    box-shadow: 0 25px 45px rgba(0, 0, 0,.1);
    border-radius: 10px;
    border-left: 1px solid rgba(255, 253, 253,.7);
    border-top: 1px solid rgba(255, 253, 253,.7);
    backdrop-filter: blur(5px);
}
.box .container h2{
  color: #fff;
  font-weight: lighter;
  margin-bottom: 20px;
}
.box .container h2 a{
color: #fff;
text-decoration: none;
}
.box .container input{
  margin: 20px;
  width: 300px;
  height: 40px;
  outline: none;
  border: none;
  border-bottom: 1px solid rgb(250, 239, 239,.7);
  background: none;
  font-size: 18px;
  color: #fff;
}
.box .container .btn{
width: 300px;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
flex-flow: row;
}
.box .container .btn button{
  width: 80px;
  height: 40px;
  background: rgb(250, 250, 250,.1);
  color: #fff;
  font-size: 16px;
}
.box .container .btn button:hover{
  background: rgb(250, 250, 250,.3);
}
